<template>
  <div>
    <el-select v-model="param.selectBox" clearable filterable remote reserve-keyword :remote-method="getBoxList"
      :disabled="disabled" @change="getCityData" :loading="param.loading" style="width:100%" placeholder="请输入箱号">
      <el-option v-for="item in param.boxOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue';
import { getTable, agentSelectPage } from '@/api/boxManage/index'

const props = defineProps({  // 默认情况下，一个组件上的 v - model 会把 value 用作 prop 且把 input 用作 event
  containerNo: {
    type: String,
    default: ''
  },
  boxType: {
    type: String,
    default: ''
  },
  boxCondition: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  needInfo: {
    type: Boolean,
    default: false
  },
  companyId: {
    type: Number,
    default: 0
  },
  boxEastYardId: {
    type: String,
    default: ''
  },

  boxList: {
    type: Array,
    default: () => {
      return []
    }
  },
})

watch(() => props.boxList, (list: any) => {
  if (list && list.length > 0) {
    param.boxOptions = list
    param.selectBox = list[0].value
  }
});
watch(() => props.containerNo, (val: any) => {
  param.selectBox = val
  console.log(param.selectBox)
})

const param = reactive({
  loading: false,
  boxOptions: [],
  selectBox: props.value
})

const getBoxList = (query: string) => {
  console.log("query",query)
  if (query) {
    param.loading = true
    const data = {
      pageNum: 1,
      pageSize: 100,
      containerNo: query,
      boxType: props.boxType,
      boxCondition: props.boxCondition,
      boxEastYardId: props.boxEastYardId,
      statusList: [5]
    }
    if (props.companyId) {
      data.companyId = props.companyId
      console.log("agentSelectPage",data)
      agentSelectPage(data).then((res: any) => {
        console.log("agentSelectPage",res.data)
        param.loading = false
        param.boxOptions = res.data.list.map((item: any) => {
          return { value: item.id, label: item.containerNo }
        })
      }).catch((err: any) => {
        console.log(err)
        param.loading = false
      })
    } else {
      getTable(data).then((res: any) => {
        console.log("getTable",res.data)
        param.loading = false
        param.boxOptions = res.data.list.map((item: any) => {
          return { value: item.id, label: item.containerNo }
        })
      }).catch((err: any) => {
        console.log(err)
        param.loading = false
      })
    }
  }
}


const emit = defineEmits(['boxId'])
const getCityData = (select: any) => {
  if (props.needInfo) {
    let info = {}
    param.boxOptions.map((item: any) => {
      if (item.value === select) {
        info = { containerNo: item.label, id: item.value }
      }
    })
    // console.log("////////////////")
    // console.log(info)
    emit('boxId', select, info)
  } else {
    emit('boxId', select)
  }
}


</script>
<style lang="scss" scoped></style>